<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <th:block th:include="include :: header('地图定位')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<style>
    select {
        padding-top: 3px !important;
    }
    .anchorBL{
        display:none;
    }
    .select-list {
        margin-top: 5px !important;
    }
    #allmap {
        width: 100%;
        height: 490px;
        margin-top: 5px;
    }
</style>
<body>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="project-form">
                <div class="col-sm-12">
                    <div class="select-list">
                        <ul>
                            <li>
                                <p>地理位置：</p>
                                <input type="text" name="position" id="position" class="form-control">
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="searchex()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <div id="allmap"></div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=oWQKuas8Ml8FgU2aiMeUSQ9oa8AWIjEX"></script>
<script>
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    map.centerAndZoom("滁州市", 13);
    var mapType1 = new BMap.MapTypeControl(
        {
            mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
            anchor: BMAP_ANCHOR_TOP_LEFT
        }
    );
    map.addControl(mapType1);          //2D图，混合图

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input": "position"
            , "location": map
        });
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();

    function searchex() {
        var address = document.getElementById("position").value;
        map.clearOverlays(); //清除地图上所有覆盖物
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(address, function (point) {
            if (point) {
                map.centerAndZoom(point, 16);
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            } else {
                alert("您选择地址没有解析到结果!");
            }
        }, "滁州市");
    }

    function submitHandler() {
        if ($("input[name='position']").val() == '') {
            $.modal.alertSuccess('请选择位置');
        } else {
            $("#proPosition", parent.document).val($("input[name='position']").val());
            $.modal.close();
        }
    }
</script>
</body>
</html>